<template>
	<view>
		<pickerModule :picker.sync="item" v-for="(item, index) in picker" :key="index" @pickerChange="pickerChange($event, index)"></pickerModule>
		<view v-if="isInit" v-cloak class="list">
			<noneRecord v-if="menuInfo.list.length == 0" :info="info" v-cloak></noneRecord>
			<menuBox :menuInfo="menuInfo" @loadMore="addPage" v-else></menuBox>
		</view>
	</view>
</template>

<script>
import pickerModule from '@/wxcomponents/form/picker.vue';
import noneRecord from '@/wxcomponents/commonLayout/noRecord.vue';
import menuBox from '@/wxcomponents/commonLayout/menuList';
import common from '@/libs/login.js';
import { format, dictCode } from '@/libs/common.js';
export default {
	data() {
		return {
			picker: [
				{
					label: '点名日期',
					value: format('YY-mm-dd', new Date()),
					required: true,
					name: 'datePicker',
					mode: 'date',
					text: format('YY-mm-dd', new Date())
				},
				{
					label: '选择班级',
					value: '',
					// required: true,
					mode: 'selector',
					name: 'className',
					range: [],
					text: '请选择班级'
				},
				{
					label: '选择课程',
					value: '',
					// required: true,
					name: 'courseName',
					mode: 'selector',
					range: [],
					text: '请选择课程'
				}
			],
			list: '',
			noRecord: false,
			isInit: false,
			info: '无点名记录!',
			menuInfo: {
				base: {
					tit: ['课程', '节次', '班级', '操作'],
					menuProp: ['courseName', 'num', 'className', 'operation']
				},
				list: []
			}
		};
	},
	async onLoad() {
		let resp = await this.getList();
		this.setList(resp)
		this.getClass(resp);
		this.getCourse(resp);
	},
	methods: {
		//获取点名列表
		async getList() {
			let resp = await this.$http.post({
				url: `/edu/rollCall/listAndSaveCourseByTeacher`,
				data: {
					lessonDate: this.picker[0].value,
					classCode: this.picker[1].value,
					courseCode: this.picker[2].value
				}
			});
			let result = [];
			if (resp.result.length == 0) {
				this.noRecord = true;
			} else {
				this.noRecord = false;
				result = resp.result;
				
			}
			this.isInit = true;
			return result;
		},
		setList(row) {
			this.menuInfo.list = [];
			row.forEach(async (item, index) => {
				this.menuInfo.list.push({
					url: `classRollRecord?data=${item.id}&time=${item.updateTime}`,
					data: item,
					courseName: item.courseName,
					num: item.lessonSectionShow,
					className: item.className,
					operation: '查看'
				});
			});
		},
		//改变班级或者课程的时候关联选项
		async pickerChange(e, index) {
			this.picker[index].value = e.value;
			this.picker[index].text = e.text;
			if(e.mode == 'date'){
				this.picker[1].range = []
				this.picker[1].value = ''
				this.picker[1].text = '请选择班级'
				this.picker[2].range = []
				this.picker[2].value = ''
				this.picker[2].text = '请选择课程'
				let resp = await this.getList();
				this.setList(resp)
				this.getClass(resp);
				this.getCourse(resp);
			}else{
				let resp = await this.getList();
				this.setList(resp)
			}
			// this.getList();
		},
		//获取班级列表
		async getClass(row) {
			let that = this
			let obj = {}
			let arr = row.map(item => {
				return {
					id: item.classCode,
					name: item.className
				};
			});
			for(let n of arr){
				if(!obj[n.name]){
					obj[n.name] = true
					this.picker[1].range.push(n)
				}
			}
		},
		//获取课程列表
		async getCourse(row) {
			let that = this
			let obj = {}
			let arr = row.map(item => {
				return {
					id: item.courseCode,
					name: item.courseName
				};
			});
			for(let n of arr){
				if(!obj[n.name]){
					obj[n.name] = true
					that.picker[2].range.push(n)
				}
			}
		},
		// 加载下一页
		addPage() {
			this.pageParams.pageNum++;
			this.getList();
		}
	},
	components: {
		pickerModule,
		noneRecord,
		menuBox
	}
};
</script>

<style lang="scss" scoped>
.list {
	position: fixed;
	z-index: 8;
	top: 370upx;
	width: 100%;
}
</style>
